<template>
  <div class="main-div">
    <Row >
      <Spin v-show="isSpinShow" fix size="large" />

      <Col span="24" />
      <Card>
        <div slot="title">
          <div>

            <Button
              type="primary"
              style="margin-right: 15px;"
              @click="action('approvalHistory')"
            >审批意见
            </Button>
            <Button
              type="primary"
              style="margin-right: 15px;"
              @click="action('flowImage')"
            >流程图
            </Button>
            <Button
              type="primary"
              style="margin-right: 15px;"
              @click="action('print')"
            >打印
            </Button>
          </div>

        </div>
        <Card>
          <div v-if="jsonData.config!=null" class="container">

            <fm-generate-form
              ref="generateForm"
              :data="jsonData"
              :remote="remoteFuncs"
              :value="editData"
              :remote-option="dynamicData"
            />

          </div>

        </Card>
      </Card>

      </Col>

    </Row>
    <Row>
      <Col span="24" />
      <footer />
      </Col>
    </Row>
    <Modal
      :mask-closable="false"
      v-model="opinion.show"
      title="意见"
      width="85%"
      :transfer="false"
    >
      <Table
        ref="selection"
        :loading="opinion.loading"
        border
        highlight-row
        height="450"
        :columns="opinion.tableColumns"
        :data="opinion.tableData"
        style="padding-left: 10px;padding-top: 10px"
      />
      <div slot="footer" />
    </Modal>
    <Modal
      :mask-closable="false"
      v-model="flowImage.show"
      title="流程图"
      width="85%"
      :transfer="false"
    >
      <iframe
        id="flowImageframe"
        width="100%"
        style="min-height: 600px"
        height="100%"
        frameborder="0"
        align="center"
        allowfullscreen="true"
        allow="autoplay"
        :src="flowImage.src"
      />
      <div slot="footer" />
    </Modal>
  </div>

</template>

<script>
import { renderHisForm } from '@/api/analy'
import Footer from '../../../common/footer'
import {
  informedTask, transferTask, invalidTask,
  opinionTask, getTransactionUrge,
  changeActivity, getOutgoingFlows, addNodeOperate,
  addSignOperate,
  saveform,
  getBackNode,
  getBackNodeUser
} from '@/api/action'

export default {
  name: 'Task',
  components: {
    Footer
  },

  data() {
    return {
      flowImage:
          {
            show: false,
            src: '',
            base: process.env.VUE_APP_BASE_BPM_API + '/view/tab.html?fireHoverAction=true&table=true' + '&instId='
          },
      jsonData: {},
      editData: {},
      remoteFuncs: {},
      dynamicData: {},
      processInstanceId: '',
      isSpinShow: true,
      fromIndex: false,
      opinion:
          {
            show: false,
            loading: true,
            tableColumns: [
              {
                title: '任务名称',
                key: 'nodeName'
              },
              {
                title: '创建时间',
                key: 'createTime'
              },
              {
                title: '审批时间',
                key: 'completeTime'
              },
              {
                title: '执行人',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  if (node.a1FlowTaskTrajectoryEntity) {
                    html = node.a1FlowTaskTrajectoryEntity.userName
                  } else {
                    html = node.auditor
                  }
                  if(!html){
                    if(node.identityLinks){
                      html=node.identityLinks
                    }

                  }
                  return h('span', html)
                }
              },
              {
                title: '任务标题',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.title
                  return h('span', html)
                }
              },
              {
                title: '备注/意见',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.opinion
                  return h('span', html)
                }
              },
              {
                title: '状态说明',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.statusVal
                  return h('span', html)
                }
              }

            ],
            tableData: []
          }
    }
  },
  mount() {
    this.getData()
  },
  created() {
    var query = this.$route.query
    if ( query.processInstanceId) {
      this.processInstanceId = query.processInstanceId
    }else{
      if(this.pid){
        this.processInstanceId = this.pid
      }
    }
    this.renderHisForm();
  },
  props: {
    pid: {
      type: String,
      default: ""
    }
  },
  watch: {
    pid() {
      if (this.pid){
        this.processInstanceId = this.pid
        this.fromIndex=true;
        this.renderHisForm();
      } else{
        this.jsonData={}
        this.editData={}
        this.fromIndex=false;


      }

    }
  },
  methods: {
    renderHisForm:function(){
      renderHisForm(this.processInstanceId).then((response) => {
        if (response.data){
          this.jsonData = JSON.parse(response.data)
        }
        if (response.editData){
          this.editData = JSON.parse(response.editData)
        }


        this.isSpinShow = false
      })
    },
    action: function(action) {
      if (typeof action === 'object') {
        this.alias = action.alias
      } else {
        this.alias = action
      }

      switch (this.alias) {
        case 'approvalHistory':
          this.opinionAction()
          break
        case 'flowImage':
          this.flowImageAction()
          break
        case 'print':

          window.print()
          break
        default:
      }
    },
    flowImageAction: function() {
      this.flowImage.src = this.flowImage.base + this.processInstanceId + '&t=' + new Date().getTime()
      this.flowImage.show = true
    },
    opinionAction: function() {
      this.opinion.show = true
      opinionTask(this.processInstanceId).then((response) => {
        if (response.code == 0) {
          this.opinion.loading = false
          this.opinion.tableData = response.data
        }
      })
    },
    details: function(e) {
      // "taskId":data.id
      this.$router.push({ name: 'handleHisTaskDetails', query: { t: new Date().getTime() }})
    }

  }

}

</script>
<style lang="scss">
  .task-card {
    margin-top: 10px;
  }

  .container {
    height: auto !important;
    min-height: 1650px;
  }

</style>
